import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Select } from 'antd'
import sort from '../../config/sort'
import { changeKind } from "../../store/blog.redux"

const Option = Select.Option

class MarkDownBottomSort extends React.Component {
    handleChange(value) {
        this.props.changeKind(value)
    }

    render() {
        return (
            <div className="markDown-bottom">
                <span>选择分类</span>
                <Select defaultValue={this.props.BlogReducer.kind} value={this.props.BlogReducer.kind}
                    style={{ width: 150 }} onChange={(value) => this.handleChange(value)}>
                    {sort.map((value) =>
                        (<Option key={value} value={value}>{value}</Option>)
                    )}
                </Select>
                <style jsx>{`
                    .markDown-bottom {
                        height: 40px;
                        padding: 5px 0 0 0;
                    }
                    span {
                        margin: 0 20px 0 0;
                        font-size: 14px;
                    }
                `}</style>
            </div>
        )
    }
}

const mapStateToProps = ({ BlogReducer }) => ({ BlogReducer })
const mapDispatchToProps = (dispatch) => {
    return {
        changeKind: bindActionCreators(changeKind, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(MarkDownBottomSort)